<template>
  <div style="width: 800px; padding-top: 5px">
    <flavor-setting
      :init-data="containerList[i]"
      :vid="item.vid"
      :ref="methods.setItemRef"
      v-for="(item, i) in containerList"
      :key="item.vid"
      @fatherFun='methods.deleteRow'
    ></flavor-setting>
  </div>
  <br />
  <div style="padding-top: 5px">
    <el-button type="primary" @click="methods.addRow">新增类型</el-button>
  </div>
  <div style="padding-top: 5px ;padding-left: 20px;">
    <el-button type="primary" @click="methods.getData">测试按钮 获取数据</el-button>
  </div>
</template>

<script lang="ts">
import { dishAdd } from "@/api/DishManage";
import { DishAddReqForm, DishAddReqFormWrapper } from "@/entity/entityDefine";
import { flavorData, rowData } from "@/entity/inlineEntityDefines";
import { ElButton, ElMessage } from "element-plus";
import {
  defineComponent,
  nextTick,
  onBeforeUpdate,
  reactive,
  Ref,
  ref,
} from "vue";
import FlavorSetting from "./FlavorSetting.vue";
export default defineComponent({
  // ref<any>(null);
  name: "FlavorSettingComponents",
  components: {
    FlavorSetting,
  },
  props: {
    msg: String,
    title: String,
    outerData: Object,
  },

  onBeforeMount() {
    //
    
  },
  mounted() {
    console.log("mounted");
    this.methods.setData(this.outerData as flavorData[]);
  },

  setup(props, { emit, expose }) {

    

    let itemRefs = reactive<any[]>([]);
    onBeforeUpdate(() => {
      itemRefs = [];
      console.log("clear");
    });

    expose = () => {
      //
      methods;
    };

    const containerList = ref([
      {
        vid:"1",
        flavorName: "默认口味",
        tags: ["不辣"],
      },
    ]);
    const inputVisible = ref(false);
    const type = ref("");

    //-------------
    const vidGen = ref(0);

    const methods = {
        generateUUID() {
            vidGen.value = vidGen.value+1;
            console.log("gen:" + vidGen.value);
            return "vid_"+vidGen.value
        },
      setData(list: flavorData[]) {
        //
        var tempList: any = [];
        list.forEach((item) => {
          let name = item.name;
          let tags = item.value;
          tempList.push({
            flavorName: name,
            tags: tags,
            vid: item.vid
          });
          console.log(name + " " + tags)
        });
        
        // containerList.value.pop();
        nextTick(() => {
            containerList.value = tempList;
        });
        

        // containerList.value.push({
        //     flavorName: tempList[0].flavorName,
        //     tags: tempList[0].tags,
        //   })
        console.log("覆盖参数:" + tempList);
          
      },

      setItemRef(el: any) {
        if (el) {
          itemRefs.push(el);
        }
      },
      send(result: boolean) {
        emit("fatherFun", result); // 第一个参数是子组件派发的函数名(子传父是通过函数事件派发)
      },
      addRow() {
        //
        containerList.value.push({
           vid: methods.generateUUID(),
          flavorName: "甜味"+containerList.value.length,
          tags: ["无糖", "少糖", "半塘", "多糖", "全塘"],
        });
      },
      getData() {
        let list: rowData[] = [];
        itemRefs.forEach((item, index) => {
          list.push({
            vid: item.methods.getData().vid,
            flavorName: item.methods.getData().flavorName,
            tags: item.methods.getData().tags,
          });
        });
        // console.log(list);
        var result: flavorData[] = methods.convertData(list);
        console.log(result);
        return result;
      },
      convertData(data: rowData[]) {
        //
        var list: flavorData[] = [];
        data.forEach((data, index) => {
          let name = data.flavorName;
          let tagStr = data.tags.value;
          let tags = tagStr.join(",");

          var item: flavorData = {
            vid: data.vid,
            name: name.value,
            value: tags,
          };
          list.push(item);
        });
        return list;
      },
      deleteRow(vid: string){
        //
        console.log("触发删除" + vid)
        // nextTick(() => {
            // containerList.value.splice(index,1);
            // itemRefs.splice(index,1);
            var vindex = -1;
            containerList.value.forEach((element,index) => {
                if (element.vid === vid) {
                    vindex = index;
                }
            });
            if(vindex !== -1) {
                containerList.value.splice(vindex,1);
            }
            
        // });

        containerList.value.forEach((element,index) => {
            console.log("after: -- " + element.vid);
        });

      }
    };

    return {
      methods,
      inputVisible,
      type,
      containerList,
      itemRefs,
    };
  },
});
</script>
<style scoped>
.el-form-item__content1 {
  display: block !important;
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
  line-height: 32px;
  position: relative;
  font-size: var(--font-size);
  min-width: 0;
}
</style>
